<template>
  <div>
    <div class="header">
      <div @mouseenter="enter(index)"
           @mouseleave="leave(index)"
           class="block"
           v-for="(item,index) in picList"
           :key="index">
        <el-image @click="selectPhoto(item.id)"
                  style="width: 336px; height: 500px"
                  :src="item.url"
                  fit="cover"></el-image>
        <div v-show="item.titleShow"
             class="block_title">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: ['picList'],
  data() {
    return {}
  },
  methods: {
    enter(index) {
      this.picList[index].titleShow = true
    },
    leave(index) {
      this.picList[index].titleShow = false
    },
    selectPhoto(id) {
      this.$router.push({
        path: '/photoAlbum',
        query: { id }
      })
    }
  }
}
</script>
<style lang="less" scope>
.header {
  display: flex;
  flex-wrap: wrap;
  .block {
    margin: 30px;
    cursor: pointer;
    position: relative;
    .block_title {
      position: absolute;
      bottom: 4px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      background-color: #000000;
      opacity: 0.4;
      font-size: 25px;
    }
  }
}
</style>
